<template>
  <view class="wscn-http404-container">
    <view class="wscn-http404">
      <view class="pic-404">
        <image mode="widthFix" class="pic-404__parent" src="@/static/404_images/404.png" alt="404"/>
        <image mode="widthFix" class="pic-404__child left" src="@/static/404_images/404_cloud.png" alt="404"/>
        <image mode="widthFix" class="pic-404__child mid" src="@/static/404_images/404_cloud.png" alt="404"/>
        <image mode="widthFix" class="pic-404__child right" src="@/static/404_images/404_cloud.png" alt="404"/>
      </view>
      <view class="bullshit">
        <view class="bullshit__oops">哎呀!</view>
        <view class="bullshit__headline">{{ message }}</view>
        <view class="bullshit__info">请检查您输入的网址是否正确。</view>
        <!-- <a href="/m" class="bullshit__return-home">回首页</a> -->
      </view>
    </view>
  </view>
</template>

<script>
  export default {
  	data() {
  		return {
        message: '站长说不能进入这个页面...',
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wscn-http404-container{
    transform: translate(-50%,-50%);
    position: absolute;
    top: 40%;
    left: 50%;
  }
  .wscn-http404 {
    
    width: 100%;
    padding: 0 20rpx;
    // display: flex;
    .pic-404 {
      width: 480rpx;
      margin-left: 100rpx;
      &__parent {
        width: 100%;
      }
      &__child {
        position: absolute;
        &.left {
          width: 64rpx;
          top: 6.8rpx;
          left: 88rpx;
          opacity: 0;
          animation-name: cloudLeft;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1s;
        }
        &.mid {
          width: 37rpx;
          top: 4rpx;
          left: 168rpx;
          opacity: 0;
          animation-name: cloudMid;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1.2s;
        }
        &.right {
          width: 50rpx;
          top: 40rpx;
          left: 200rpx;
          opacity: 0;
          animation-name: cloudRight;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1s;
        }
        @keyframes cloudLeft {
          0% {
            top: 17rpx;
            left: 220rpx;
            opacity: 0;
          }
          20% {
            top: 33rpx;
            left: 188rpx;
            opacity: 1;
          }
          80% {
            top: 81rpx;
            left: 97rpx;
            opacity: 1;
          }
          100% {
            top: 97rpx;
            left: 60rpx;
            opacity: 0;
          }
        }
        @keyframes cloudMid {
          0% {
            top: 10rpx;
            left: 420rpx;
            opacity: 0;
          }
          20% {
            top: 40rpx;
            left: 360rpx;
            opacity: 1;
          }
          70% {
            top: 130rpx;
            left: 180rpx;
            opacity: 1;
          }
          100% {
            top: 160rpx;
            left: 120rpx;
            opacity: 0;
          }
        }
        @keyframes cloudRight {
          0% {
            top: 100rpx;
            left: 500rpx;
            opacity: 0;
          }
          20% {
            top: 120rpx;
            left: 460rpx;
            opacity: 1;
          }
          80% {
            top: 180rpx;
            left: 340rpx;
            opacity: 1;
          }
          100% {
            top: 200rpx;
            left: 300rpx;
            opacity: 0;
          }
        }
      }
    }
    .bullshit {
      width: 60%;
      height: 300rpx;
      text-align: center;
      margin: auto;
      margin-top: 70rpx;
      &__oops {
        font-size: 36rpx;
        font-weight: bold;
        color: #1482f0;
        opacity: 0;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
      }
      &__headline {
        font-size: 26rpx;
        color: #222;
        font-weight: bold;
        opacity: 0;
        margin: 8rpx 0;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.1s;
        animation-fill-mode: forwards;
      }
      &__info {
        font-size: 20rpx;
        color: grey;
        opacity: 0;
        margin-bottom: 12rpx;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
      }
      &__return-home {
        display: block;
        width: 186rpx;
        height: 64rpx;
        background: #1482f0;
        border-radius: 32rpx;
        text-align: center;
        text-decoration:none;
        color: #ffffff;
        opacity: 0;
        font-size: 26rpx;
        line-height: 64rpx;
        margin: auto;
        cursor: pointer;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
      }
      @keyframes slideUp {
        0% {
          transform: translateY(24px);
          opacity: 0;
          
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }
    }
  }
</style>
